Reactstrap — Navs

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a navbar and nav with Reactstrap.

Vertical Nav

A nav component can be vertical.

It’s useful for displaying links vertically.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

All we did is ad the vertical prop to the Nav and it’ll render vertically.

We can do the same thing with a list-based nav:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav vertical>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

Tabs

We can disable navs in tab form.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Nav,
  NavItem,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu,
  NavLink
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <div>
      <Nav tabs>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have a Nav with the tabs prop to display the nav as tabs.

And we have the NavItem component to display the nav item.

NavLink has the link.

We can add a dropdown to it with the Dropdown component.

Inside it, we have the DropdownToggle and DropdownMenu components.

The drop down is controlled with the isOpen prop, which is controlled by the toggle callback.

The nav prop makes it fit within the nav.

The active prop highlights the nav item.

Pills

We can also display navs in pills form.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Nav,
  NavItem,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu,
  NavLink
} from "reactstrap";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <div>
      <Nav pills>
        <NavItem>
          <NavLink href="#" active>
            link
          </NavLink>
        </NavItem>
        <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle nav caret>
            drop down
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>1</DropdownItem>
            <DropdownItem disabled>2</DropdownItem>
            <DropdownItem>3</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>4</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <NavItem>
          <NavLink href="#">another link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">some Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

All we did is switch the tabs prop with the pills prop.

Conclusion

We can display navs in various ways.

They can be shown as tabs or pills.

We can also add dropdowns into them.

And they can also be vertical.